import React, { Component } from 'react';  
import { HashRouter as Router, Route, Link , Switch } from "react-router-dom";

import "./Menu.scss";
import { Drawer , Icon} from 'antd';

import aboutMe from '../../../page/aboutMe/aboutMe'; // 关于我
import technologyStack from '../../../page/technologyStack/technologyStack'; // 技术栈
import workPorject from '../../../page/workPorject/workPorject'; // 工作项目
import myPorject from '../../../page/myPorject/myPorject'; // 个人项目
import resume from '../../../page/resume/resume'; // 简历
import contactMe from '../../../page/contactMe/contactMe'; // 联系我

class MenuComponent extends Component {
  constructor(props){
  	super(props);
  	this.state={
      needindex:0,
      bottomBorder_left:0,
      bottomBorder_width:0, 
	  visible: false, 
	  placement: 'top',//定义选择框方位 
  	}
  }
  componentDidMount(){  
	let pathName='/'+window.location.hash.split("/")[1]; 
	if(pathName=="/aboutMe"){
		this.setState({needindex:0})
	}else if(pathName=="/technologyStack"){
		this.setState({needindex:1})
	}else if(pathName=="/resume"){
		this.setState({needindex:2})
	}else if(pathName=="/contactMe"){
		this.setState({needindex:3})
	}
  }
  goRouter(path,index){  //路由跳转  
    this.setState({
      needindex:index,
    }) 
  }
  showDrawer = () => { //显示弹出框 menu
    this.setState({
      visible: true,
    });
  };
  onClose = () => { //关闭弹出框 menu
	this.setState({
	  visible: false,
	}); 
  };
  render() {    
    return (
      <div className="navConainer" style={{backgroundImage:`url(${this.props.backImg})`}}>
		<Router>
			<div className="navConainer_warp">		
				<div className="navConainer_sub">
					<div className="leftDiv_p">
						<div className="leftDiv"></div>
						<span></span>
					</div>
					<ul ref="munLiUl">
					  { 
						this.props.navDataList.map((item,index)=>{
						 return(
							<li key={index} onClick={this.goRouter.bind(this,item.path,index)} style={{width:index===1?0:'auto'}}>
								<Link to={item.path}> 
									<dl>
									  <dt style={{fontSize:this.state.needindex===index?'18px':'14px'}}>{item.title}</dt>
									</dl>
									<div className="bottomBorder" style={{height:this.state.needindex===index?3+'px':0}}></div>
								</Link> 
							</li>
						  )
						})
					  }
					</ul> 
					<div className="menu_top_icon">
						<Icon type="appstore" onClick={this.showDrawer}/>
						<Drawer 
						  placement={this.state.placement}
						  closable={true}
						  onClose={this.onClose}
						  visible={this.state.visible}
						>
						  {
							this.props.navDataList.map((item,index)=>{
							 return(
								<Link key={index} to={item.path}  onClick={this.onClose}>
									<p className="menu_p">{item.title}</p>
								</Link> 
							  )
							})
						  }
						</Drawer>
					</div>
				</div>
			</div>
			<div className="content_conainer">
				<Route path="/aboutMe" component={aboutMe}/>
				<Route path="/technologyStack" component={technologyStack} />
				<Route path="/workPorject" component={workPorject} />
				<Route path="/myPorject" component={myPorject} />
				<Route path="/resume" component={resume} />
				<Route path="/contactMe" component={contactMe} /> 
			</div>	
		</Router>
      </div>
    )
  }
}


export default MenuComponent;